import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  TextInput,
  Text
} from 'react-native'

import NavBar from '../../../../components/PublicHeader';

export default class editingHobbies extends Component {
  constructor(props) {
    super(props)
    this.state = {
      topTitle: "编辑爱好", // 头部标题
      titleColor: "#333", // 标题颜色
      editingHobbies: null, // 修改后的爱好
      rightText: "完成", // 右边完成按钮
      editingHobbies: this.props.navigation.state.params.editingHobbies, // 原本的爱好
    };
  }

  componentDidMount = () => { }
  // 爱好 编辑保存方法
  uploadEditingHobbies = () => {
    this.props.navigation.state.params.refresh(this.state.editingHobbies)
    this.props.navigation.goBack()// 返回上一级
  }
  // 爱好修改方法
  onChangeText = (inputText) => {
    this.setState({
      editingHobbies: inputText
    })
  }
  render() {
    return (
      <View style={styles.warperEditingHobbies}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={this.state.topTitle}
          titleColor={this.state.titleColor}
          right={this.state.rightText}
          pressRight={() => {
            this.uploadEditingHobbies() // 完成 保存
          }}
        />
        <View style={styles.editingHobbies}>
          {/* 爱好 */}
          <View style={styles.editingHobbiesBox}>
            <TextInput
              onChangeText={inputText => this.onChangeText(inputText)}
              multiline={true}
              value={this.state.editingHobbies}
              maxLength={20}
              placeholder='请输入你的爱好'
              style={styles.editingHobbiesInput} />
          </View>
          {/* 文本提示 输入格式 */}
          <Text style={styles.formatTips}>请输入你要修改的爱好</Text>
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  warperEditingHobbies: {
    flex: 1,
    backgroundColor: "rgba(240,240,240,0.3)",
  },

  editingHobbiesBox: {
    height: 150,
    marginTop: 20,
    width: "100%",
    backgroundColor: "#fff"
  },
  editingHobbiesInput: {
    borderWidth: 0,
    paddingLeft: 15
  },
  formatTips: {
    fontSize: 14,
    color: "#999",
    padding: 15
  },
})